import React from 'react';
import { Card, Button, Space } from 'antd-mobile';
import { AppOutline } from 'antd-mobile-icons';
import { useNavigate } from 'react-router-dom';
import styles from './NotFound.module.less';

const NotFound = () => {
  const navigate = useNavigate();
  const message = '页面不存在';

  const handleGoHome = () => {
    navigate('/');
  };

  const handleGoBack = () => {
    navigate(-1);
  };

  return (
    <div className={styles.container}>
      <div className={styles.content}>
        <Card className={styles.notFoundCard}>
          <div className={styles.notFoundContent}>
            <div className={styles.iconWrapper}>
              <AppOutline className={styles.notFoundIcon} />
            </div>
            
            <h2 className={styles.title}>404</h2>
            <p className={styles.message}>{message}</p>
            <p className={styles.description}>
              抱歉，您访问的页面不存在或已被删除
            </p>
            
            <Space className={styles.buttonGroup}>
              <Button 
                color="primary" 
                onClick={handleGoHome}
                className={styles.button}
              >
                <AppOutline />
                返回首页
              </Button>
              <Button 
                color="default" 
                onClick={handleGoBack}
                className={styles.button}
              >
                返回上页
              </Button>
            </Space>
          </div>
        </Card>
      </div>
    </div>
  );
};

export default NotFound;
